<template>
    <div class="phone-register">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <div class="cont">
            <h5>红粉宝宝整形</h5>
            <div class="reg-main">
                <p class="title">用户注册</p>
                <div class="phone"><span>手机号：</span><input type="text" placeholder="长度6~20个字符" ref="mobile"><a @click="email">邮箱注册</a></div>
                <div class="phone name"><span>昵称：</span><input type="text" placeholder="长度2~20个字符" ref="username"></div>
                <div class="phone pw"><span>密码：</span><input type="password" placeholder="长度6~20个字符和数字" ref="password"><a href="javascript:;">请输入密码长度为6~20位</a></div>
                <div class="phone repw"><span>重复密码：</span><input type="password" placeholder="密码" ref="repassword"></div>
                <div class="verify"><span>验证码：</span><input type="text" placeholder="请输入验证码"><div class="auth-code">2KTn</div></div>
                <div class="verify mobver"><span>手机验证码：</span><input type="text" placeholder="请输入手机验证码" ref="code"><button>获取验证码</button></div>
                <div class="already" @click="login">已有账号登录</div>
                <div class="reg"><button @click="register">注册</button></div>
                <div class="protocol"><Checkbox v-model="single">我已阅读同意 <a href="javascript:;">《红粉用户注册协议》</a></Checkbox></div>
                <div class="line"></div>
                <div class="reg-login">
                        <p class="reg-login-tit">您还可以用以下方式登录</p>
                        <ul>
                            <li><img src="../Login/img/weibo.png" alt=""><p>微博登录</p></li>
                            <li><img src="../Login/img/QQ.png" alt=""><p>QQ登录</p></li>
                            <li><img src="../Login/img/weixin.png" alt=""><p>微信登录</p></li>
                        </ul>
                </div>
            </div>
        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    import HeaderMenu from '@/components/Header/'
    export default {
        name: "phoneRegister",
        components:{
            BottomIcon,
            PageFooter,
            HeaderMenu
        },
        data(){
            return{
                single:false
            }
        },
        methods: {
            email () {
                this.$router.push({path: '/emailRegister'})
            },
            login(){
                this.$router.push({path: '/login'})
            },
            // register () {
                // const url ='http://www.hfbb.com/api/user/register';
                // var params = new URLSearchParams();
                // params.append('username', this.$refs.username.value);       //你要传给后台的参数值 key/value
                // params.append('password', this.$refs.password.value);
                // params.append('repassword', this.$refs.repassword.value);
                // params.append('mobile', this.$refs.mobile.value);
                // params.append('code', '666');
                // params.append('type', '1');
                // this.$axios({
                //     method: 'post',
                //     url:url,
                //     data:params
                // }).then((res)=>{
                //     console.log(res)
                //     if(res.code==0){
                //         this.$Message.info(res.data.msg);
                //     }else if(this.$refs.username.value==''||this.$refs.password.value==''||this.$refs.repassword.value==''||this.$refs.mobile.value==''){
                //         this.$Message.info('请输入用户完整信息');
                //     }else{
                //         this.$Message.info(res.data.msg);
                //     }
                //

                // });
         register () {
                let that=this
                // console.log(111)
             let reg = /^.{6,20}$/;
             let myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
                let mobile=this.$refs.mobile.value;
                let username=this.$refs.username.value;
                let password=this.$refs.password.value;
                let repassword=this.$refs.repassword.value;
                let code=this.$refs.code.value
             if(this.single==false){
                 that.$Message.info('请先同意用户协议');
             }else if(username==''||password==''||repassword==''||mobile==''||code==''){
                 that.$Message.info('请填写完整信息');

             }else if (!myreg.test(mobile)){
                 that.$Message.info('请输入正确的手机号码');
                 // return false
             }else if(password!=repassword){
                 that.$Message.info('两次密码不一致');
             }else if(!reg.test(password)){
                 that.$Message.info('密码长度为6到20位');
             }else if(code!=666){
                 that.$Message.info('手机验证码错误');
             }else {
                 this.$post('/api/user/register', {
                     username:username,
                     password:password,
                     repassword:repassword,
                     mobile:mobile,
                     code:code,
                     type:1
                 }, function (res) {
                     console.log(res)
                     that.$Message.info(res.msg);
                 }, function (errcode, errmsg) {
                     that.$Message.info(errmsg);

                 })
             }


            }

        }
    }

</script>

<style lang="less" scoped>
.cont{
    background-color: #FE91A5;
    padding-bottom: 30px;
    h5{
        color: #fff;
        background-color: #FE91A5;
        font-size: 28px;
        text-align: center;
        padding: 60px 0 24px 0;
    }
    .reg-main{
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        background-color: #fff;
        border-radius: 6px;
    }
    .title{
        font-size: 16px;
        color: #333333;
        padding: 34px 0 23px 0;
    }
    .phone{
        margin-left: 0;
    }
    .phone span,.verify span{
        font-size: 14px;
        color: #333333;
        margin-right: 13px;
    }
    .reg-main input{
        padding-left: 10px;
    }
    .phone input{
        width: 228px;
        height: 32px;
    }
    .verify input{
        width: 138px;
        height: 32px;
    }
    .phone a{
        font-size: 12px;
        color: #ff5371;
        margin-left: 13px;
        text-decoration: underline;
    }
    .name{
        margin: 22px 0 0 -44px;
    }
    .pw{
        margin: 22px 0 0 105px;
    }
    .pw a{
        text-decoration: none;
    }
    .repw{
        margin: 22px 0 0 -72px;
    }
    .verify{
        margin: 22px 0 0 -6px;
    }
    .auth-code{
        width: 122px;
        height: 42px;
        display: inline-block;
        margin-left: 18px;
        padding-top: 11px;
        border: 1px solid #eeeeee;
        color: #568fc6;
    }
    .mobver{
        margin-left: -84px;
    }
    .mobver button{
        width: 84px;
        height: 32px;
        background-color: #ff5371;
        outline: none;
        border: none;
        color: #fff;
        margin-left:6px;
    }
    .already{
        margin: 19px 0 25px 173px;
        color:#ff8c25;
    }
    .reg button{
        outline: none;
        border: none;
        color: #fff;
        width: 228px;
        height: 40px;
        background-color: #ff5371;
        border-radius: 4px;
        font-size: 20px;
    }
    .protocol{
        margin: 14px 0 49px 0;
    }
    .protocol a{
        color: #FE5371;
    }
    .line{
        width: 600px;
        margin: 0 auto;
        border: .5px solid #f0f0f0;
    }
    .reg-login{
        width: 300px;
        height: 204px;
        margin: 0 auto;
        overflow: hidden;
    }
    .reg-login .reg-login-tit{
        color: #333333;
        font-size: 16px;
        margin: 29px 0 27px 0;
    }
    .reg-login ul li{
        float: left;
    }
    .reg-login ul li p{
        margin-top: 3px;
    }
    .reg-login ul li:nth-child(2){
        margin: 0 58px;
    }

}
</style>